<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>放大镜案例</title>
		<style>
			*{
				padding: 0%;
				margin: 0%;
			}
			#box{
				width: 430px;
				height: 430px;
				border: 1px #ddd;
				margin: 50px;
				position: relative;
			}
			#small_box{
				width: 455px;
				height: 455px;
				position: relative;
			}
			#small_box #mask{
				position: absolute;
				width: 210px;
				height: 210px;
				top: 0;
				left: 0;
				background: url(images/image1.jpg) repeat;
				display: none;
				overflow: hidden;
			}
			#big_box{
				left: 465px;
				top: 0%;
				position: absolute;
				width: 430px;
				height: 430px;
				overflow: hidden;
				border: 1px #ddd;
				display: none;
			}
			#big_box img {
				position: absolute;
				z-index: 5;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="small_box">
				<img src="images/image3.jpg" alt="" />
				<span id="mask">
					
				</span>
			</div>
			<div id="big_box">
				<img src="images/image2.jpg" alt="" />
			</div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			//1.获取需要的标签
			let box = document.getElementById('box');
			let small_box = box.children[0];
			let big_box = box.children[1];
			let small_img = small_box.children[0];
			let mask = small_box.children[1];
			let big_img = big_box.children[0];
			
			//2.监听鼠标一移入
			small_box.onmouseover = function() {
			small_box.onmouseout = function() {
				big_box.style.display = 'none';
				mask.style.display = 'none';
			}
				//2.1 移动识别
				mask.style.display = 'block';
				big_box.style.display = 'block';
				//2.2 监听鼠标移动
				small_box.onmousemove = function(e) {
					//2.3 求出移动距离
					e = e || window.event;
					let moveX = e.clientX - small_box.offsetLeft - box.offsetLeft - mask.offsetWidth * 0.5;
					let moveY = e.clientY - small_box.offsetTop - box.offsetTop - mask.offsetHeight * 0.5;
					//2.5 边界处理
					// if(moveX <= 0) {
					// 	moveX = 0;
					// }else if(moveX >= small_box.offsetWidth - mask.offsetWidth) {
					// 	moveX = small_box.offsetWidth - mask.offsetWidth;
					// }else if(moveY <= 0) {
					// 	moveY = 0;
					// }else if(moveY >= small_box.offsetHeight - mask.offsetHeight) {
					// 	moveY = small_box.offsetHeight - mask.offsetHeight;
					// }
					//2.4 让小盒子移动
					mask.style.left = moveX + 'px';
					mask.style.top = moveY + 'px';
					
					//2.6移动大盒子
					let x = moveX / (big_box.offsetWidth - big_img.offsetWidth);
					let y = moveY / (big_box.offsetWidth - big_img.offsetWidth);
					big_img.style.left = -x * (big_box.offsetWidth - big_img.offsetWidth) + 'px';
					big_img.style.top = -y * (big_box.offsetWidth - big_img.offsetWidth) + 'px';
				}
			}
		}
	</script>
</html>